<template>
    <div class="select-dialog">
      <div class="select-title">
        <p>请选择<i>{{reqOrSign}}</i>场地</p>
        <em @click="closeSelect">完成</em>
      </div>
      <hr class="mu-divider">
      <div class="scroll" ref="scroll">
          <ul class="content">
            <li v-for="item in list">
              <p class="list-item" ref="listItem">{{item.title}}</p>
              <i v-show="item.value === currentSelect" class="iconfont">&#xe609;</i>
            </li>
          </ul>
      </div>
      <div class="close" @click="toclose">
        关闭
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    props: {
      type: {
        type: Number,
        default: 1
      }
    },
    components: {},
    data() {
      return {
        currentSelect: 0,
        list: [
          {
            title: '1号场馆',
            value: 1
          },
          {
            title: '2号场馆',
            value: 2
          },
          {
            title: '3号场馆',
            value: 3
          },
          {
            title: '4号场馆',
            value: 4
          }
        ]
      }
    },
    mounted () {
      let self = this;
      this.$nextTick(() => {
        setTimeout(() => {
          let wrapper = this.$refs.scroll;
          if (!wrapper) return;
          let scroll = new BScroll(wrapper, {
            scrollY: true,
            tap: true
          });
          console.log(scroll)
          let listItem = this.$refs.listItem;
          listItem.forEach((value, key) => {
            value.addEventListener('tap', () => {
              self.currentSelect = self.list[key].value
            })
          })
        }, 1000)
      });
    },
    computed: {
      reqOrSign () {
        return this.type === 1 ? '查询' : '报名'
      }
    },
    methods: {
      toclose () {
        this.currentSelect = 0;
        this.$emit('closeSelect')
      },
      closeSelect () {
        this.$emit('selectOne', this.currentSelect);
      }
    }
  };
</script>
<style scoped lang="less" rel="stylesheet/less">
  @import "./style.less";
</style>
